import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Input, Button, message, Carousel } from 'antd';
import { getCompanyInfo, companyInitPwd, findDistinctStubList } from "../../../fetch/fetchApi";
import ScModal from '../../../components/feedback/scModal';
import StubList from './stubList'

const FormItem = Form.Item;
class CompanyQuery extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
            spinning: false,
            btnDisplay: "none"
        }
        this.query = {};
    }

    handleMobileInputChange = (e) => {
        this.query.account = e.target.value;
    }

    handleQueryButtonClick = (e) => {
        if (!this.query.account) {
            message.error("请输入手机号");
            return;
        }
        this.setState({
            spinning: true
        })
        getCompanyInfo(this.query).then((resData) => {
            if (!resData) {
                return;
            }
            if (resData.data.code === '200') {
                const discountRangeList = resData.data.data.discountRangeList;
                this.companyId = resData.data.data.id;
                let citys = "";
                this.stubIdsArr = [];
                for ( let item of discountRangeList ) {
                    if (item.type === 0) {
                        citys += (item.rangeName + "/");
                    } else if (item.type === 1) {
                        this.stubIdsArr.push(item.rangeId);
                    }
                }

                this.setState({
                    data: resData.data.data,
                    spinning: false,
                    citys: citys,
                    btnDisplay: ''
                });
            } else {
                this.setState({
                    data: {},
                    btnDisplay: 'none',
                    citys: "",
                    spinning: false
                });
            }
        })
    }

    handleResetPwdButtonClick = (e) => {
        this.setState({
            resetPwdBtnLoading: true
        })
        companyInitPwd({
            id: this.companyId
        }).then((data) => {
            if (data.data.code === "200") {
                this.setState({
                    resetPwdModalVisible: true,
                    resetPwdBtnLoading: false
                })
            } else {
                this.setState({
                    resetPwdBtnLoading: false
                })
            }
        })
    }

    handleResetPwdModalCancel = (e) => {
        this.setState({
            resetPwdModalVisible: false
        })
    }

    handleChcekStubButtonClick = (e) => {
        console.log(this.stubIdsArr);
        if (this.stubIdsArr.length === 0) {
            message.error("没有电站");
            return;
        }
        this.setState({
            stubListModalVisible: true,
            stubGroupIds: this.stubIdsArr.join(",")
        })
    }

    filterDataHandler(t) {
        if (!t) {
            return "--";
        }
        if (typeof t === 'string' && t.indexOf("null") > -1) {
            return "--";
        }
        return t;
    }

    // 打开预览
    openThumbModal(imgs, title, type) {
        this.openType = type;
        const imgArr = imgs.toString().split(',');
        const thumbDom = [];
        for ( let i of imgArr ) {
            i.length && thumbDom.push(<div key={i}><h3><img src={i} /></h3></div>);
        }
        this.setState({
            width: 620,
            modalTitle: title,
            thumbDom: thumbDom,
            modalName: 'thumbPic'
        }, () => {
            this.setState({
                modalVisible: !0
            });
        });
    }

    handleCancel = () => {
        this.setState({
            modalVisible: false,
            confirmLoading: false,
            info: ''
        });
    }

    handlestubListModalCancel = () => {
        this.setState({
            stubListModalVisible: false
        });
    }

    render() {
        const content = <div className="sc-page-content">
            <div className="page-toolbar">
                <Row gutter={8}>
                    <Col lg={8} xl={4}>
                        <Input placeholder="手机号精确查询" onChange={this.handleMobileInputChange}/>
                    </Col>
                    <div  className="button-inlineBlock">
                        <Button type="primary" onClick={this.handleQueryButtonClick}>查询</Button>
                    </div>
                </Row>
            </div>
            <Spin  spinning={this.state.spinning}>
            <div className="page-panel">
                <Row gutter={8}>
                    <Col lg={8} xl={10}>
                        <div className={'page-info-item'}>
                            <h3><span>企业信息</span></h3>
                            <ul>
                                <li>
                                    <strong>企业账号:</strong>
                                    <span>{this.filterDataHandler(this.state.data.account)}</span>
                                    <Button loading={this.state.resetPwdBtnLoading} style={{
            display: this.state.btnDisplay
        }} type="primary" onClick={this.handleResetPwdButtonClick}>重置密码</Button>
                                </li>
                                <li>
                                    <strong>企业名称:</strong>
                                    <span>{this.filterDataHandler(this.state.data.name)}</span>
                                </li>
                                <li>
                                    <strong>申请时间:</strong>
                                    <span>{this.filterDataHandler(this.state.data.createTime)}</span>
                                </li>
                                <li>
                                    <strong>所在城市:</strong>
                                    <span>{this.filterDataHandler(this.state.data.city)}</span>
                                </li>
                                <li className={'img-line'}>
                                    <strong>企业标志:</strong>
                                    {this.state.data.icon ? <img  onClick={() => this.openThumbModal(this.state.data.icon, '图片预览', 0)} src={this.state.data.icon} style={{
            height: '40px'
        }}/> : <span>--</span>}
                                </li>
                                <li>
                                    <strong>企业资质:</strong>
                                    {this.state.data.img ? <img  onClick={() => this.openThumbModal(this.state.data.img, '图片预览', 0)} src={this.state.data.img} style={{
            height: '40px'
        }}/> : <span>--</span>}
                                </li>
                                <li>
                                    <strong>状      态:</strong>
                                    <span>{this.filterDataHandler(this.state.data.statusStr)}</span>
                                </li>
                                <li>
                                    <strong>{this.state.data.status === 0 ? "解散时间" : "审核时间"}:</strong>
                                    <span>{this.filterDataHandler(this.state.data.status === 0 ? this.state.data.modifyTime : this.state.data.approveTime)}</span>
                                </li>
                            </ul>
                        </div>
                    </Col>
                    <Col lg={8} xl={14}>
                        <div className={'page-info-item'}>
                            <h3><span>账户信息</span></h3>
                            <ul>
                                <li>
                                    <strong>账户余额:</strong>
                                    <span>{this.filterDataHandler(this.state.data.amount)}</span>
                                </li>
                                <li>
                                    <strong>透支额度:</strong>
                                    <span>{this.filterDataHandler(this.state.data.overdraft)}</span>
                                </li>
                                <li>
                                    <strong>折扣类型:</strong>
                                    <span>{this.filterDataHandler(this.state.data.discountModeStr)}</span>
                                    
                                </li>
                                <li>
                                    <strong>折  扣  值:</strong>
                                    <span>{this.filterDataHandler(this.state.data.discountVal)}</span>
                                </li>
                                <li style={{
            display: 'block',
            height: 'auto',
            lineHeight: '30px'
        }}>
                                    <strong>折扣范围:</strong>
                                    <span>城市范围：{this.state.citys}</span>
                                    <div style={{
            marginLeft: '80px'
        }}>
                                        <span>电站范围:</span>
                                        <span>
                                            指定电站
                                        </span>
                                        <Button style={{
            display: this.state.btnDisplay
        }} type="primary" onClick={this.handleChcekStubButtonClick}>查看电站</Button>
                                    </div>
                                </li>
                                <li>
                                    <strong>有效时间:</strong>
                                    <span>{this.filterDataHandler(this.state.data.rangeTime)}</span>
                                </li>
                                { /*<li>
                                    <strong>配置时间:</strong>
                                    <span>--</span>
                                </li>*/ }
                            </ul>
                        </div>
                    </Col>
                </Row>
            </div>
            </Spin>
            <Modal title="密码重置成功" visible={this.state.resetPwdModalVisible} footer={null} onCancel={this.handleResetPwdModalCancel}>
                <p>密码已重置，已通过短信通知用户，请及时告知用户。</p>
                <p>手机号码：{this.query.account}</p>
            </Modal>
            <Modal title="电站列表" width='800px' visible={this.state.stubListModalVisible} footer={null} onCancel={this.handlestubListModalCancel}>
                <StubList stubGroupIds={this.state.stubGroupIds}/>
            </Modal>
            <ScModal
        width={this.state.width}
        modalVisible={this.state.modalVisible}
        modalTitle={this.state.modalTitle}
        modalContent={(
        <div className="sc-modal-scroll">
                            <div className={'modal-list'}>
                            <Carousel autoplay>
                            {this.state.thumbDom}
                            </Carousel>
                            </div>
                            </div>
        )}
        cancel={this.handleCancel}
        footer={null}
        />

        </div>

        return content;
    }
}
export default CompanyQuery;
